import React, { useState } from 'react';
import { Pagination } from '../components/UI/Pagination';
import { FilterSidebar } from '../components/UI/FilterSidebar';
import { ArrowRightIcon, StarIcon } from 'lucide-react';
interface ListPageProps {
  title: string;
  description: string;
  items: any[];
  filters: any[];
}
export const ListPage = ({
  title,
  description,
  items: initialItems,
  filters
}: ListPageProps) => {
  const [currentPage, setCurrentPage] = useState(1);
  const [selectedFilters, setSelectedFilters] = useState<Record<string, string[]>>({});
  const itemsPerPage = 8;
  // Filter items based on selected filters
  const filteredItems = initialItems.filter(item => {
    // If no filters are selected, show all items
    if (Object.keys(selectedFilters).length === 0) return true;
    // Check if item matches all selected filter groups
    return Object.entries(selectedFilters).every(([groupId, selectedOptions]) => {
      // If no options selected in this group, it passes
      if (selectedOptions.length === 0) return true;
      // Check if item has at least one of the selected options in this group
      return selectedOptions.some(optionId => item.attributes[groupId] === optionId || Array.isArray(item.attributes[groupId]) && item.attributes[groupId].includes(optionId));
    });
  });
  // Calculate pagination
  const totalPages = Math.ceil(filteredItems.length / itemsPerPage);
  const startIndex = (currentPage - 1) * itemsPerPage;
  const paginatedItems = filteredItems.slice(startIndex, startIndex + itemsPerPage);
  const handleFilterChange = (groupId: string, optionId: string, isSelected: boolean) => {
    setSelectedFilters(prevFilters => {
      const newFilters = {
        ...prevFilters
      };
      if (!newFilters[groupId]) {
        newFilters[groupId] = [];
      }
      if (isSelected) {
        newFilters[groupId] = [...newFilters[groupId], optionId];
      } else {
        newFilters[groupId] = newFilters[groupId].filter(id => id !== optionId);
        // Remove empty filter groups
        if (newFilters[groupId].length === 0) {
          delete newFilters[groupId];
        }
      }
      return newFilters;
    });
    // Reset to first page when filters change
    setCurrentPage(1);
  };
  const clearFilters = () => {
    setSelectedFilters({});
    setCurrentPage(1);
  };
  return <div className="w-full bg-cream py-12">
      <div className="container mx-auto px-4 md:px-6">
        <div className="text-center mb-10">
          <h1 className="font-nunito font-bold text-3xl md:text-4xl text-dark mb-4">
            {title}
          </h1>
          <p className="font-inter text-gray-600 max-w-2xl mx-auto">
            {description}
          </p>
        </div>
        <div className="flex flex-col md:flex-row">
          <FilterSidebar filters={filters} selectedFilters={selectedFilters} onFilterChange={handleFilterChange} onClearFilters={clearFilters} />
          <div className="flex-grow">
            {filteredItems.length > 0 ? <>
                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                  {paginatedItems.map(item => <a key={item.id} href={`#${item.id}`} className="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow">
                      <div className="aspect-square relative">
                        <img src={item.image} alt={item.title} className="w-full h-full object-cover" />
                        {item.rating && <div className="absolute top-3 right-3 bg-white/90 rounded-full px-2 py-1 flex items-center">
                            <StarIcon size={14} className="text-yellow fill-yellow" />
                            <span className="ml-1 text-sm font-medium">
                              {item.rating}
                            </span>
                          </div>}
                        {item.badge && <div className="absolute top-3 left-3 bg-yellow/80 text-yellow-800 rounded-full px-2 py-1 text-xs font-medium">
                            {item.badge}
                          </div>}
                      </div>
                      <div className="p-4">
                        <h3 className="font-nunito font-semibold text-lg mb-1">
                          {item.title}
                        </h3>
                        <p className="text-sm text-gray-600 mb-3">
                          {item.description}
                        </p>
                        <span className="text-terracotta text-sm font-medium flex items-center">
                          View Details
                          <ArrowRightIcon size={16} className="ml-1" />
                        </span>
                      </div>
                    </a>)}
                </div>
                {totalPages > 1 && <Pagination currentPage={currentPage} totalPages={totalPages} onPageChange={setCurrentPage} />}
              </> : <div className="bg-white rounded-lg p-8 text-center">
                <h3 className="font-nunito font-semibold text-xl mb-2">
                  No items found
                </h3>
                <p className="text-gray-600 mb-4">
                  Try adjusting your filters or search criteria.
                </p>
                <button onClick={clearFilters} className="px-4 py-2 bg-terracotta text-white rounded-md hover:bg-terracotta/90 transition-colors">
                  Clear Filters
                </button>
              </div>}
          </div>
        </div>
      </div>
    </div>;
};